{extend name="public/layout"}
{block name="title"}我要捐赠{/block}
{block name="head"}
<style>
    .h0 {
        font-size: 0.45rem;
        padding-right: 0.1rem;
    }

    .panel-sm {
        padding-top: 0.15rem;
        padding-bottom: 0.15rem;
    }

    .msg-list img {
        width: 0.672rem;
        height: 0.672rem;
        margin-right: 0.28800000000000003rem;
    }

    .icon {
        width: 0.3072rem;
        height: 0.3072rem;
    }

    .icon-circle {
        border: 1px solid #ccc;
        border-radius: 50%;
    }

    .selected .icon-circle {
        position: relative;
        border: 1px solid #ff0000;
    }

    .selected .icon-circle > span {
        position: absolute;
        display: block;
        background-color: #ff0000;
        top: 0.05rem;
        right: 0.05rem;
        left: 0.05rem;
        bottom: 0.05rem;
        border-radius: 50%;
    }

    .btn-block-area {
        padding-top: 2.8608rem;
    }

    .flex > div:last-child {
        width: 0.4rem;
    }
</style>
{/block}
{block name="content"}
<div class="panel bg-white border-t border-b mt">
    <div class="flex">
        <div class="flex-con">
            金额
        </div>
        <div class="text-right h0 text-primary">
            {$m}
        </div>
        <div>元</div>
    </div>
</div>
<div class="border-t panel border-b bg-white mt panel-sm">
    <div class="h1">选择支付方式</div>
</div>
<div class="msg-list bg-white border-b" id="payments">
    <div class="msg flex border-b selected" data-id="0">
        <img src="/images/weixin.png" alt="">
        <div class="flex-con">
            微信支付
        </div>
        <div>
            <div class="icon icon-circle">
                <span></span>
            </div>
        </div>
    </div>
    <div class="msg flex border-b" data-id="1">
        <img src="/images/alipay.png" alt="">
        <div class="flex-con">
            支付宝支付
        </div>
        <div>
            <div class="icon icon-circle">
                <span></span>
            </div>
        </div>
    </div>
    <div class="msg flex" data-id="2">
        <img src="/images/bank-card.png" alt="">
        <div class="flex-con">
            银行卡支付
        </div>
        <div>
            <div class="icon icon-circle">
                <span></span>
            </div>
        </div>
    </div>

</div>


<div class="btn-block-area panel">
    <div class="btn-primary btn-block btn-rounded" onclick="gotoPay()">
        下一步
    </div>
</div>
{:_js('js/phone.js')}
<script>
    var payment_id = 0;
    $('#payments').on('click', 'div[data-id]', function () {
        var jq = $(this);
        var id = jq.data('id');
        payment_id = parseInt(id);

        jq.addClass('selected').siblings().removeClass('selected');
    });
    function gotoPay() {
        if(payment_id!=0){
            ui.msg('暂只支持微信支付，谢谢！');
            return;
        }
        c.post("{:U('createOrder')}", {payment_id: payment_id, m: '{$_GET.m}'}, function (ret) {
            location.href = "{:U('wxpay/index')}?id="+ret.info;
        });
    }
</script>

{/block}